<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的个人博客</title>
    <style>
        /* 初始加载样式 */
        body {
            visibility: visible;
            opacity: 1;
        }
        .page-loading {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: var(--bg-color, #fff);
            display: flex;
            justify-content: center;
            align-items: center;
            z-index: 9999;
            transition: opacity 0.3s ease;
        }
        .page-loading.hidden {
            opacity: 0;
            pointer-events: none;
        }
    </style>
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <div class="page-loading">
        <div class="loading-spinner"></div>
    </div>
    <header>
        <nav class="main-nav">
            <div class="logo">
                <h1><a href="index.html">我的博客</a></h1>
            </div>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="frontend.html" class="nav-link">技术分享</a>
                    <ul class="submenu">
                        <li><a href="frontend.html">前端开发</a></li>
                        <li><a href="backend.html">后端开发</a></li>
                        <li><a href="tools.html">开发工具</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a href="travel.html" class="nav-link">生活随笔</a>
                    <ul class="submenu">
                        <li><a href="travel.html">旅行日记</a></li>
                        <li><a href="food.html">美食推荐</a></li>
                    </ul>
                </li>
                <li class="nav-item">
                    <a href="profile.html" class="nav-link">关于我</a>
                    <ul class="submenu">
                        <li><a href="profile.html">个人简介</a></li>
                        <li><a href="contact.html">联系方式</a></li>
                    </ul>
                </li>
            </ul>
            <div class="nav-actions">
                <a href="publish.html" class="publish-btn-nav">发布文章</a>
                <button id="theme-toggle" class="theme-toggle">
                    <span class="light-icon">☀️</span>
                    <span class="dark-icon">🌙</span>
                </button>
            </div>
        </nav>
    </header>

    <main>
        <section class="hero">
            <h2>欢迎来到我的博客</h2>
            <p>分享技术，记录生活</p>
        </section>

        <div class="content-grid">
            <div class="main-content">
                <div class="search-box">
                    <input type="text" placeholder="搜索文章..." id="search-input">
                    <button type="button" id="search-btn">搜索</button>
                </div>

                <div class="post-toc widget">
                    <h3>文章目录</h3>
                    <ul class="toc-list">
                        <li><a href="#frontend">前端开发</a></li>
                        <li><a href="#backend">后端开发</a></li>
                        <li><a href="#tools">开发工具</a></li>
                        <li><a href="#life">生活随笔</a></li>
                    </ul>
                </div>

                <article class="blog-post">
                    <h3 id="frontend">前端开发</h3>
                    <div class="post-item" data-category="frontend">
                        <div class="post-header">
                            <h4>Web开发最佳实践</h4>
                            <div class="post-meta">
                                <span class="post-date">2024-01-20</span>
                                <span class="post-views">阅读: 1280</span>
                                <span class="post-category">分类: 前端开发</span>
                            </div>
                        </div>
                        <img src="" data-src="https://picsum.photos/800/400" alt="文章配图" class="post-image">
                        <p>在本文中，我们将探讨现代Web开发中的一些最佳实践...</p>
                        <div class="post-tags">
                            <span class="tag">前端开发</span>
                            <span class="tag">Web</span>
                            <span class="tag">最佳实践</span>
                        </div>
                        <div class="post-footer">
                            <audio controls>
                                <source src="https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3" type="audio/mpeg">
                                您的浏览器不支持音频元素。
                            </audio>
                            <div class="share-buttons">
                                <button class="share-btn weixin">微信</button>
                                <button class="share-btn weibo">微博</button>
                                <button class="share-btn qq">QQ</button>
                            </div>
                        </div>
                    </div>
                    
                    <div class="post-item" data-category="frontend">
                        <div class="post-header">
                            <h4>Vue.js 3.0 新特性解析</h4>
                            <div class="post-meta">
                                <span class="post-date">2024-01-18</span>
                                <span class="post-views">阅读: 956</span>
                                <span class="post-category">分类: 前端开发</span>
                            </div>
                        </div>
                        <img src="" data-src="https://picsum.photos/800/400?random=2" alt="文章配图" class="post-image">
                        <p>Vue.js 3.0带来了许多激动人心的新特性，本文将详细介绍这些变化...</p>
                        <div class="post-tags">
                            <span class="tag">Vue</span>
                            <span class="tag">JavaScript</span>
                            <span class="tag">框架</span>
                        </div>
                    </div>

                    <div class="post-item" data-category="frontend">
                        <div class="post-header">
                            <h4>CSS Grid 布局完全指南</h4>
                            <div class="post-meta">
                                <span class="post-date">2024-01-15</span>
                                <span class="post-views">阅读: 856</span>
                                <span class="post-category">分类: 前端开发</span>
                            </div>
                        </div>
                        <img src="" data-src="https://picsum.photos/800/400?random=3" alt="文章配图" class="post-image">
                        <p>CSS Grid 布局是一个强大的二维布局系统，本文将详细介绍其使用方法和最佳实践...</p>
                        <div class="post-tags">
                            <span class="tag">CSS</span>
                            <span class="tag">Grid</span>
                            <span class="tag">布局</span>
                        </div>
                    </div>

                    <h3 id="backend">后端开发</h3>
                    <div class="post-item" data-category="backend">
                        <div class="post-header">
                            <h4>Node.js性能优化实践</h4>
                            <div class="post-meta">
                                <span class="post-date">2024-01-16</span>
                                <span class="post-views">阅读: 723</span>
                                <span class="post-category">分类: 后端开发</span>
                            </div>
                        </div>
                        <img src="" data-src="https://picsum.photos/800/400?random=4" alt="文章配图" class="post-image">
                        <p>如何优化Node.js应用性能？本文将分享一些实用的性能优化技巧和工具...</p>
                        <div class="post-tags">
                            <span class="tag">Node.js</span>
                            <span class="tag">性能优化</span>
                            <span class="tag">后端</span>
                        </div>
                    </div>

                    <h3 id="tools">开发工具</h3>
                    <div class="post-item" data-category="tools">
                        <div class="post-header">
                            <h4>Git 进阶技巧详解</h4>
                            <div class="post-meta">
                                <span class="post-date">2024-01-17</span>
                                <span class="post-views">阅读: 645</span>
                                <span class="post-category">分类: 开发工具</span>
                            </div>
                        </div>
                        <img src="" data-src="https://picsum.photos/800/400?random=5" alt="文章配图" class="post-image">
                        <p>除了基本的提交和推送，Git还有很多强大的功能，本文将介绍一些进阶技巧...</p>
                        <div class="post-tags">
                            <span class="tag">Git</span>
                            <span class="tag">工具</span>
                            <span class="tag">本控制</span>
                        </div>
                    </div>

                    <h3 id="life">生活随笔</h3>
                    <div class="post-item" data-category="travel">
                        <div class="post-header">
                            <h4>程序员的周末：探索城市小角落</h4>
                            <div class="post-meta">
                                <span class="post-date">2024-01-14</span>
                                <span class="post-views">阅读: 432</span>
                                <span class="post-category">分类: 生活随笔</span>
                            </div>
                        </div>
                        <img src="" data-src="https://picsum.photos/800/400?random=6" alt="文章配图" class="post-image">
                        <p>工作之余，发现城市中的美好时刻，记录生活中的小确幸...</p>
                        <div class="post-tags">
                            <span class="tag">生活</span>
                            <span class="tag">摄影</span>
                            <span class="tag">城市</span>
                        </div>
                    </div>
                </article>
            </div>

            <aside class="sidebar">
                <div class="about-widget widget">
                    <h3>关于博主</h3>
                    <img src="https://picsum.photos/150/150" alt="博主头像" class="avatar">
                    <p>热爱技术，热爱生活的程序员</p>
                    <div class="social-links">
                        <a href="#" class="social-link github">GitHub</a>
                        <a href="#" class="social-link weixin">微信</a>
                        <a href="#" class="social-link email">邮箱</a>
                    </div>
                </div>

                <div class="popular-posts widget">
                    <h3>热门文章</h3>
                    <ul class="popular-list">
                        <li class="popular-item">
                            <img src="https://picsum.photos/50/50?random=7" alt="热门文章配图" class="popular-image">
                            <div class="popular-content">
                                <h4>Web开发最佳实践</h4>
                                <span class="popular-views">阅读: 1280</span>
                            </div>
                        </li>
                        <li class="popular-item">
                            <img src="https://picsum.photos/50/50?random=8" alt="热门文章配图" class="popular-image">
                            <div class="popular-content">
                                <h4>Vue.js 3.0 新特性解析</h4>
                                <span class="popular-views">阅读: 956</span>
                            </div>
                        </li>
                    </ul>
                </div>

                <div class="archives widget">
                    <h3>文章归档</h3>
                    <ul class="archive-list">
                        <li>
                            <a href="#" class="archive-link">
                                2024年01月 <span class="archive-count">(6)</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="archive-link">
                                2023年12月 <span class="archive-count">(8)</span>
                            </a>
                        </li>
                        <li>
                            <a href="#" class="archive-link">
                                2023年11月 <span class="archive-count">(5)</span>
                            </a>
                        </li>
                    </ul>
                </div>

                <div class="tags-widget widget">
                    <h3>标签云</h3>
                    <div class="tag-cloud">
                        <a href="#" class="tag-item" style="font-size: 1.4em">JavaScript</a>
                        <a href="#" class="tag-item" style="font-size: 1.2em">CSS</a>
                        <a href="#" class="tag-item" style="font-size: 1.6em">Vue</a>
                        <a href="#" class="tag-item">React</a>
                        <a href="#" class="tag-item" style="font-size: 1.3em">Node.js</a>
                        <a href="#" class="tag-item">Python</a>
                        <a href="#" class="tag-item" style="font-size: 1.5em">前端开发</a>
                    </div>
                </div>

                <div class="recent-comments widget">
                    <h3>最近评论</h3>
                    <div class="comment-form">
                        <h4>发表评论</h4>
                        <form id="commentForm">
                            <div class="form-group">
                                <input type="text" id="commenterName" placeholder="您的昵称" required>
                            </div>
                            <div class="form-group">
                                <textarea id="commentContent" placeholder="写下您的评论..." required></textarea>
                            </div>
                            <button type="submit" class="submit-btn">发表评论</button>
                        </form>
                    </div>
                    <ul class="comment-list">
                        <li class="comment-item">
                            <img src="https://picsum.photos/50/50?random=1" alt="评论者头像" class="commenter-avatar">
                            <div class="comment-content">
                                <div class="commenter-name">张三</div>
                                <p>这篇文章写得很好，学习了！</p>
                                <span class="comment-meta">2024-01-19</span>
                            </div>
                        </li>
                        <li class="comment-item">
                            <img src="https://picsum.photos/50/50?random=2" alt="评论者头像" class="commenter-avatar">
                            <div class="comment-content">
                                <div class="commenter-name">李四</div>
                                <p>期待更多相关内容的分享。</p>
                                <span class="comment-meta">2024-01-18</span>
                            </div>
                        </li>
                    </ul>
                </div>
            </aside>
        </div>
    </main>

    <footer>
        <p>&copy; 2024 我的个人博客. All rights reserved.</p>
    </footer>
    <script src="assets/js/jquery.js"></script>
    <script src="assets/js/main.js"></script>
    <script src="assets/js/article-list.js"></script>
</body>
</html> 